<template>
  <el-main>
    <el-row class="body-card">
      <h3 style="cursor: pointer">好友列表</h3>
       <Divider/>
      <el-row>
	   <el-col :span="8" v-for="(item, index) in friendlist_items" :key="index" >  
		   <el-card :body-style="{ padding: '0px' }">
		    <div style="padding: 14px;">
        <span>  {{ item.username}} (用户id: {{ item.id}})</span>
        <div class="bottom clearfix">  
          <el-button type="text"  @click="handleDelete(item.id)">删除好友</el-button>
        </div> 
      </div> 
    </el-card>
  </el-col>
      </el-row>
    </el-row>
  </el-main>
</template>
<script>
import {
  friendlistServer,
  friendServer, 
} from "../../api/friend";

  import ElIcon from "element-ui/packages/icon/src/icon";
  export default {
    components: {ElIcon},
    name: "friendmenu",
    data() {
      return {
        friendlist_items: [],
        dialogFormVisible: false,
        dialogTypes: 0,
        formLabelWidth: '100px',
        formData: {
          id: 123,
          name: "张三",
          role: 'StandardUser'
        }
      };
    },
    mounted() { 
      this.getfriendlist();
    },
    methods: {
	 handleDelete(deleteuserid) {
      if (!!deleteuserid) {
        this.$confirm("是否删除此好友?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
		    friendServer("delete", { 
	   params: 
	   {deleteuserid: deleteuserid,}
      }).then(
        suc => {
          const { code, message } = suc.data;
          if (code) {
                this.$message({
                  type: "success",
                  message
          });
		       this.getfriendlist();
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
      );
   });
      }
    }, 
       getfriendlist() { 
        friendlistServer("get", {}).then(
        suc => {
          const { code, data, message } = suc.data;
          if (code) {
            if (Array.isArray(data)) {
              this.friendlist_items = data; 
            }
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
      );
      },
    }
  };
</script>

<style lang="less">

</style>
